<template>
  <div class="m-newStyle">
    <div class="main-new">
      <div class="clearfix updateBtn">
        <w-button type="main" class="fr m-btn" @on-click="update">编辑</w-button>
      </div>
      <section class="floor-main">
        <!--楼层标题  -->
        <floor-header :type="floor.displayMode" :floor-name="floor.floorName || '新品上新'" :floor-src="floor.floorPhotoPath"></floor-header>
        <!--蒙层阴影  -->
        <div class="main-box"></div>
        <!--商品展示  -->
        <div v-if="floor.goodsList && floor.goodsList.length == 2">
          <div class="clearfix tc">
            <router-link class="box image-box" to="">
              <img v-lazy="floor.goodsList[0].goodsPath" alt="">
            </router-link>
            <router-link class="box image-box" to="">
              <img v-lazy="floor.goodsList[0].goodsPath" alt="">
            </router-link>
          </div>
          <h4>￥{{floor.goodsList[0].goodsPrice | currency}}</h4>
          <div class="clearfix tc">
            <router-link class="box image-box" to="">
              <img v-lazy="floor.goodsList[1].goodsPath" alt="">
            </router-link>
            <router-link class="box image-box" to="">
              <img v-lazy="floor.goodsList[1].goodsPath" alt="">
            </router-link>
          </div>
          <h4>￥{{floor.goodsList[1].goodsPrice | currency}}</h4>
        </div>
        <div v-else>
          <div class="clearfix tc">
            <router-link class="box image-box" to=""><img src="../../../assets/noimg.png"></router-link>
            <router-link class="box image-box" to=""><img src="../../../assets/noimg.png"></router-link>
          </div>
          <h4>请选择商品</h4>
          <div class="clearfix tc">
            <router-link class="box image-box" to=""><img src="../../../assets/noimg.png"></router-link>
            <router-link class="box image-box" to=""><img src="../../../assets/noimg.png"></router-link>
          </div>
          <h4>请选择商品</h4>
        </div>
      </section>
    </div>

    <!--编辑区  -->
    <w-panel-fixed-wrap class="updateArea" width="1000px" height="500px" title="新款发布" 
      v-model="wrap" @on-confirm="addNewStyle" @on-cancel="onCancel">
      <form id="addNewStyle" :action="url" method="POST" enctype="multipart/form-data">
        <!--楼层配置  -->
        <div class="form-inline">
          <div class="form-group">
            <w-label :must="false">排序</w-label>
            <w-input rule="isEmpty|onlyInt" error="必填|只能为数字" name="sequence" v-model="params.sequence"></w-input>
            <span class="tip">根据设置的数字进行位置排序数字越小，位置越往上</span>
          </div>
          <div class="form-group">
            <w-label :must="false">是否展示</w-label>
            <w-radio :label="0" name="isOpen" v-model="params.isOpen">是</w-radio>
            <w-radio :label="1" name="isOpen" v-model="params.isOpen">否</w-radio>
            <span class="marl">设置否，则此楼层不在个人店铺首页展示</span>
          </div>
          <div class="form-group">
            <w-label :must="false">楼层名称</w-label>
            <w-radio :label="0" name="displayMode" v-model="params.displayMode">文字展示</w-radio>
            <w-radio :label="1" name="displayMode" v-model="params.displayMode">图片展示</w-radio>
          </div>
          <div class="form-group" v-show="params.displayMode == 0">
            <w-label :must="false">设置图层名称</w-label>
            <w-input :validate="false" name="floorName" v-model="params.floorName"></w-input>
          </div>
          <div class="form-group" v-show="params.displayMode == 1">
            <w-label :must="false">图片上传</w-label>
            <!-- <w-button class="upload">上传<input type="file" name="floorPhotoId" @change="getImageRealPath($event.target)" accept="image/jpeg,image/gif,image/png"></w-button> -->
            <div class="upload">
              上传<input type="file" name="floorPhotoId" @change="getImageRealPath($event.target)" accept="image/jpeg,image/gif,image/png">
            </div>
            <img class="prev-image" :src="params.floorPhotoId" alt="">
          </div>
        </div>
        <!--关联产品  -->
        <!-- 关联搜索组件 -->
        <associated-search max="2" @on-input="getInputValue" @header="setNavigationType"></associated-search>
        <!-- 添加商品和已选商品选项框 -->
        <div class="add-exists-goods" v-show="!params.linkedProductType">
          <product-group max="2" :goods="goodsList" :products="params.goodsList" v-model="params.goodsIdList" @on-search="refresh = true"></product-group>
        </div>
        <!-- 隐藏字段 -->
        <div class="hidden">
          <input type="hidden" name="goodsIdList" :value="params.goodsIdList">
          <input type="hidden" name="accessToken" :value="params.accessToken">
          <input type="hidden" name="floorType" value="Templet2">
          <input type="hidden" name="id" :value="params.id">
          <input type="hidden" name="decorationType" value="PC">
          <input type="hidden" name="linkedProductType" :value="params.linkedProductType">
          <input type="hidden" name="linkedProductUrl" :value="params.linkedProductUrl">
        </div>
      </form>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
  // 关联商品搜索组件
  import associatedSearch from './associatedSearch'
  // 商品组件
  import productGroup from './productGroup'
  // 楼层标题组件
  import floorHeader from './floorHeader'

  // 店铺PC装修的链接
  import { apiAdornPC } from '../../../common/api'
  import { API } from '../../../common/config'

  // 导入检验的js
  import { validateFloorParam, inSelectedGoodsList } from '../validate'
  import { getFileRealPath } from '../../../common/util'

  export default {
    props: {
      list: {
        type: [Array, Object],
        default: () => { return [] }
      },
      // 当前楼层
      floor: {
        type: Object,
        default: () => { return [] }
      }
    },
    computed: {
      url() {
        // 如果当前是修改状态
        if (this.params.isEdit) {
          return `${API}decoration/updateFloor`
        }
        // 当前是新增状态
        return `${API}decoration/addFloor`
      }
    },
    data() {
      return {
        refresh: false,
        wrap: false,
        wordType: 'goods',
        goodsList: [],
        params: {
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          navigationId: '12',
          sequence: 0,
          isOpen: 0,
          floorType: 'Templet',
          displayMode: 1,
          goodsIdList: '',
          floorName: '',
          linkedProductType: 0,
          linkedProductUrl: '',
          floorPhotoId: ''
        }
      }
    },
    methods: {
      /**
       * 获取图片的真实路径
       */
      getImageRealPath(file) {
        this.params.floorPhotoId = getFileRealPath(file)
      },

      /**
       * 设置类型
       */
      setNavigationType(value) {
        this.params.linkedProductType = 1

        // 如果当前是商品
        if (value == 'goods') {
          this.params.linkedProductType = 0
        }
      },

      /**
       * 设置搜索关键字类型 goods: 按照商品搜索 link: 按照链接搜索
       *
       * @param { String } value 搜索的参数
       */
      getInputValue(value) {
        // 如果当前是商品
        if (value.type == 'link') {
          this.params.linkedProductType = 1
          this.params.linkedProductUrl = value.goodsLink
        }

        // 如果当前是按商品查询
        if (value.type == 'goods') {
          // 设置类型是链接
          this.params.linkedProductType = 0

          // 设置token
          value.accessToken = this.$store.getters.token

          // 先清空商品列表
          this.goodsList = []

          // 获取参数
          apiAdornPC.searchGoodsByParams(value).then((data) => {
            // 如果没有获取到商品列表
            if (!data.list || data.list.length == 0) {
              return
            }
            if (this.refresh) {
              this.goodsList = data.list
            } else {
              // 遍历数据
              data.list.forEach((v) => {
                // 如果当前商品不在已选列表中
                if (!inSelectedGoodsList(v, this.params.goodsList)) {
                  this.goodsList.push(v)
                }
              })
            }
          })
        }
      },

      /**
       * 新增新的Banner
       */
      addNewStyle() {
        // 商品没选，则提示
        if (!validateFloorParam(this.params)) {
          return
        }
        // 分割商品列表，如果商品不是3个，则弹框提示
        if (!this.params.goodsIdList || this.params.goodsIdList.split(',').length !== 2) {
          this.$toast('请选择2个商品')
          return
        }

        // 添加banner
        this.$emit('add', this.onCancel)
      },

      /**
       * 点击编辑按钮
       */
      update() {
        // 设置弹框
        this.wrap = true

        // 商品id集合
        let goodsIds = []

        // 如果商品列表存在
        if (this.floor.goodsList && this.floor.goodsList.length > 0) {
          this.floor.goodsList.forEach((v) => {
            goodsIds.push(v.goodsId)
          })
        }
        // 参数
        this.params = {
          id: this.floor.id,
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          sequence: (this.floor.sequence || 4),
          isOpen: (this.floor.isOpen || 0),
          floorType: 'Templet',
          displayMode: (this.floor.displayMode || 0),
          goodsIdList: (goodsIds.join(',') || ''),
          linkedProductType: 0,
          linkedProductUrl: '',
          goodsList: (this.floor.goodsList || []),
          floorName: this.floor.floorName,
          floorPhotoId: this.floor.floorPhotoPath,
          isEdit: false
        }

        // 如果楼层有值，则标记为编辑
        if (this.floor.id) {
          this.params.isEdit = true
        }
      },
      // 确定
      onConfirm() {
        this.wrap = !this.wrap
      },
      // 取消
      onCancel() {
        this.wrap = !this.wrap
      }
    },
    components: {
      productGroup,
      floorHeader,
      associatedSearch
    }
  }
</script>

<style lang="scss" scoped>
  @import './style.scss';

  h4 {
    width: 900px;
    margin: 0 auto;
    text-align: right;
  }

  .form-group {
    display: block;

    .control-label {
      width: 86px;
      text-align: right;
      display: inline-block;
      margin-right: 40px;
    }

    .m-radio:nth-child(3) {
      margin-left: 30px;
    }

    .marl {
      margin-left: 133px;
      display: inline-block;
    }

    .w-input {
      display: inline-block;
      margin-right: 24px;
      width: 230px;
    }

    .upload {
      position: relative;
      overflow: hidden;
      width: 90px;
      height: 30px;
      line-height: 26px;
      background-color: #47bdf4;
      color: #FFFFFF;
      text-align: center;
      vertical-align: middle;
      display: inline-block;
      border-radius: 4px;
      cursor: pointer;

      input[type=file] {
        cursor: pointer;
        position: absolute;
        opacity: 0;
        width: 1000px;
        height: 1000px;
        top: 0px;
        left: 0px;
      }
    }

    .prev-image {
      display: inline-block;
      width: auto;
      height: 30px;
      margin-bottom: -10px;
    }
  }

  .m-newStyle {
    position: relative;
    .main-new {
      width: 1000px;
      margin: 0 auto;
      &:hover {
        .main-box {
          background-color: #000;
          position: absolute;
          z-index: 9;
          width: 1000px;
          height: 100%;
          opacity: 0.6;
          top: 0;
          left: 0;
          right: 0;
          margin: 0 auto;
        }
        .updateBtn {
          display: inline-block;
        }
      }
    }

    .image-box {
      display: inline-block;
      width: 440px;
      height: 440px;

      &:last-child {
        width: 450px;
        margin-left: 10px;
      }

      img {
        background-color: #CCC;
      }
    }

    .floor-main {
      margin-bottom: 30px;
      width: 100%;
      margin-top: 30px;
    }
    .updateBtn {
      width: 1000px;
      margin: 0 auto;
      display: none;
      position: absolute;
      z-index: 11;
      right: 0;
      left: 0;
      .m-btn {
        margin: 20px 20px 0 0;
        width: 90px;
      }
    }
  }

  // 编辑区
  .updateArea {
    top: 264px;
    .floor1{
      .floor1-div {
        margin-bottom: 18px;
        .title {
          width: 90px;
          display: inline-block;
          text-align: left;
        }
        .input-box {
          width: 236px;
          display: inline-block;
          margin: 0 24px 0 10px;
        }
        .tip {
          color: #999;
        }
      }
    }
    .floor2 {
      .title {
        height: 52px;
        line-height: 52px;
        padding: 0 20px;
        background: #f7f7f7;
        .smallTitle {
          font-weight: bold;
        }
        .tip {
          color: #FF7E00;
          display: inline-block;
          margin-left: 44px;
        }
      }
      .select-box {
        padding: 24px 0 28px 100px;
        border-bottom: 1px solid #E0E0E0;
        .select {
          display: inline-block;
          width: 134px;
          height: 32px;
          margin-right: 26px;
        }
        .input-box {
          width: 160px;
          height: 32px;
          display: inline-block;
        }
      }
    }
    .goodsArea {
      .searchBtn {
        width: 91px;
        height: 31px;
        margin: 23px auto 50px 100px;
      }
    }
  }

  .tc {
    text-align: center;
  }
</style>